<template>
  <div class="nav-container">
    <el-menu
      :default-active="activeIndex"
      class="nav-menu"
      mode="horizontal"
      router
      @select="handleSelect"
    >
      <!-- Logo区域 -->
      <div class="logo-container">
        <img src="@/assets/logo.png" alt="HIIT Logo" class="logo" />
        <span class="logo-text">HIIT健身</span>
      </div>

      <!-- 导航菜单项 -->
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/courses">课程</el-menu-item>

      <!-- 右侧购物车图标 -->
      <div class="right-section">
        <CartIconNav />
      </div>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import CartIconNav from '../icons/CartIconNav.vue';

// 路由实例
const router = useRouter();

// 当前激活的菜单项
const activeIndex = ref(router.currentRoute.value.path);

// 菜单选择处理
const handleSelect = (key) => {
  router.push(key);
};
</script>

<style scoped>
.nav-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-menu {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-right: 40px;
  cursor: pointer;
}

.logo {
  height: 40px;
  margin-right: 10px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.right-section {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .logo-text {
    display: none;
  }

  .nav-menu {
    padding: 0 10px;
  }
}
</style>